<template>
    <el-header style="margin-bottom: 20px;" class="SettingHeader">
        <div>
            <span style="font-size: 30px; font-weight: bold;">系统设置</span>
        </div>
    </el-header>

    <el-card style="margin-bottom: 20px;">
        <div class="ThemeToggle">
            <span style="margin-right: 20px; font-weight: bold;">暗夜模式</span>
            <el-switch v-model="isDark" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="toggleDark" size="large" style="margin-left: 2px;"/>
        </div>
    </el-card>

    <el-card style="margin-bottom: 20px;">
        <div class="ThemeToggle">
            <span style="margin-right: 20px; font-weight: bold;">营业时间</span>
            <el-button @click="ViewHourDialog = true">查看时间</el-button>
            <el-button @click="EditHourDialog = true">修改时间</el-button>
        </div>
    </el-card>

    <el-card style="margin-bottom: 20px;">
        <div class="ThemeToggle">
            <span style="margin-right: 20px; font-weight: bold;">日志操作</span>
            <el-button>导出日志</el-button>
            <el-button>查看日志</el-button>
            <el-button type="danger">删除日志</el-button>
        </div>
    </el-card>

    <el-dialog v-model="ViewHourDialog" title="当前营业时间" width="500">
		<el-descriptions direction="vertical" :column="2" border>
			<el-descriptions-item label="开始营业时间" label-align="center" align="center">{{ ToHour(hourStore.StartHour) }}</el-descriptions-item>
			<el-descriptions-item label="结束营业时间" label-align="center" align="center">{{ ToHour(hourStore.CloseHour) }}</el-descriptions-item>
		</el-descriptions>

		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="ViewHourDialog = false">确定</el-button>
			</div>
		</template>
	</el-dialog>

	<el-dialog v-model="EditHourDialog" title="修改营业时间" width="500">

		<el-form :model="EditHourData" label-width="auto">
			<el-form-item label="开始营业时间">
				<el-input-number v-model="EditHourData.StartHour" :min="0" :max="EditHourData.CloseHour" :step="1"  :placeholder="hourStore.StartHour"/>
			</el-form-item>
			<el-form-item label="结束营业时间">
				<el-input-number v-model="EditHourData.CloseHour" :min="EditHourData.StartHour" :max="23" :step="1"  :placeholder="hourStore.CloseHour"/>
			</el-form-item>
		</el-form>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="EditHourDialog = false">取消</el-button>
				<el-button type="primary" @click="EditHourClick">确定</el-button>
			</div>
		</template>

	</el-dialog>


</template>

<script lang='ts' setup name='SettingSystem'>

// 导入必要组件
import { Sunny, Moon, Edit } from "@element-plus/icons-vue";
import { reactify, useDark, useToggle } from "@vueuse/core";
import { useHourStore } from "@/store/openHour";
import { reactive, ref } from "vue";

// 切换主题颜色
const isDark = useDark();
const toggleDark = useToggle(isDark);

// 对话框显示参数
let ViewHourDialog = ref(false)
let EditHourDialog = ref(false)

// 获取营业时间
const hourStore = useHourStore()


// 修改营业时间
let EditHourData = reactive({
	StartHour: undefined,
	CloseHour: undefined
})

// 格式化时间
function ToHour(hour: number){
	if(hour < 10){
		return `0${hour}:00`
	}
	else{
		return `${hour}:00`
	}
}

// 修改营业时间
function EditHourClick(){
    EditHourDialog.value = false
	hourStore.$patch({
		StartHour: EditHourData.StartHour,
		CloseHour: EditHourData.CloseHour
	})
}

</script>

<style scoped>

.ThemeToggle{
    margin-left: 20px;
}

</style>